<template>
  <el-card id="index_id">
    <template>
      <el-carousel indicator-position="outside">
        <el-carousel-item v-for="item in $store.state.IndexStore.img_list" :key="item.id">
         <!-- <el-carousel-item v-for="item in $store.state.img_list" :key="item.id"> --> -->
          <img class="img_item" :src="'http://127.0.0.1:3000'+item.img" />
        </el-carousel-item>
      </el-carousel>
    </template>
  </el-card>
</template>

<script>
import {mapActions, mapGetters, mapMutations, mapState,} from 'vuex'
export default {
  data() {
    return {
    };
  },
  computed: {
    ...mapState({'img_list':state=>state.IndexStore.img_list}),
    ...mapGetters('IndexStore',['BannerLength'])
  },
  methods: {
    ...mapActions('IndexStore',['BannerActions']),
    ...mapMutations('IndexStore',['BannerMutation'])
  },
  created() {
    this.BannerActions()
  }

};
</script>

<style>
#index_id {
  height: 80vh;
}
#index_id .img_item{
  width: 100%;
  height: 100%;
}

</style>